<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>系统设置-用户管理</title>
    <!-- jquery - boot -库文件 -->
    <script src="__PUBLIC__/script/jquery.1.11.1.js"></script>
    <script src="__PUBLIC__/script/bootstrap.min.js"></script>
    <!-- Bootstrap -->
    <link href="__PUBLIC__/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap -->
    <!-- font awesome -->
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/plugins/FontAwesome/css/font-awesome.min.css">
    <script src="__PUBLIC__/script/common.js"></script>
    <!--easyui包含文件-->
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/plugins/easyui1.5.3/themes/material/easyui.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/plugins/easyui1.5.3/themes/icon.css">
    <script type="text/javascript" src="__PUBLIC__/plugins/easyui1.5.3/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/plugins/easyui1.5.3/locale/easyui-lang-zh_CN.js"></script>
    <!--layer-->
    <script type="text/javascript" src="__PUBLIC__/plugins/layer/layer.js"></script>
    <!-- 自定义 css -->
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/reset.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/common.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/style.css">
    <!-- end easyui -->
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="__PUBLIC__/script/html5shiv.js"></script>
    <script src="__PUBLIC__/script/respond.js"></script>
    <![endif]-->
</head>

<body>
    <include file="Public/header"/>
    <!--总体-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 mainbox" id="mainbox">
                <!--左边栏-->
                <div class="datamenubox" id="leftmenu">
                    <div class="menuhead">系统设置</div>
                    <!--下方列表-->
                    <div class="treein" id="menuin">
                        <ul class="list-group smenu">
                            <volist name="menulist" id="vo">
                                <a href="{:U($vo[url])}"><li class="list-group-item" id="{$vo.url}"><i class="fa fa-angle-right"></i>{$vo.name}</li></a>
                            </volist>
                        </ul>
                    </div>
                </div>
                <!--右侧主体-->
                <div class="col-md-12 rights" id="right">
                    <!--导航-->
                    <div style="height:30px;font-size: 14px;display: inline-block;">
                        <ol>
                            <li class="active">&nbsp主页&nbsp/&nbsp人员管理</li>
                        </ol>
                    </div>
                    <!--搜索栏及按键-->
                    <div class="searchitem">
                        <div class="row">
                            <!--搜索框-->
                            <div class="col-md-12">
                                <input class="easyui-textbox" name="q_name" id="q_name" style="width:300px" data-options="label:'姓名：',required:false">
                            </div>
                        </div>
                        <div class="blank10"></div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="btnin">
                                    <button class="btn btn-danger" id="querybtn">查询</button>
                                    <button class="btn btn-info" id="addbtn">添加</button>
                                    <button class="btn btn-info" id="updatebtn">编辑</button>
                                    <button class="btn btn-info" id="delbtn">删除</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--底部展示栏-->
                    <div>
                        <table id="dg"></table>
                    </div>
                </div>
            </div>
        </div>
        <!--顶部多出橙色顶-->
        <div id="w" class="easyui-window" title="添加/编辑用户" data-options="modal:true,closed:true" style="width:500px;height:400px;padding:15px;display:none;">
            <div class="row">
                <div class="col-md-12">
                    <form id="ff" method="post" data-options="novalidate:true">
                        <div class="row">
                            <div class="col-md-12">
                                <input class="easyui-textbox" name="xm" id="xm" style="width:300px" data-options="label:'姓名：',required:true">
                            </div>
                        </div>
                        <div class="blank10"></div>
                        <div class="row">
                            <div class="col-md-12">
                                <input class="easyui-textbox" name="username" id="zh" style="width:300px" data-options="label:'账户：',required:true">
                            </div>
                        </div>
                        <div class="blank10"></div>
                        <div class="row">
                            <div class="col-md-12">
                                <input class="easyui-textbox"  type="password" name="pwd" id="pwd" style="width:300px" data-options="label:'密码：',required:true">
                            </div>
                        </div>
                        <div class="blank10"></div>
                        <div class="row">
                            <div class="col-md-12">
                                <input class="easyui-textbox"  type="qrpassword" name="qrpwd" id="qrpwd" style="width:300px" data-options="label:'确认密码：',required:true" textType="eqPassword['#modifyPwdFrom input[name=pwd]']">
                            </div>
                        </div>
                        <div class="blank10"></div>
                        <div class="row">
                            <div class="col-md-12">
                                <input class="easyui-combobox" name="role" id="role" style="width:300px" data-options="label:'角色：',valueField:'id',textField:'text',panelHeight:'100',required:true"/>
                            </div>
                        </div>
                        <div class="blank10"></div>
                        <div class="blank10"></div>

                        <input type="hidden" id="hidid" name="hidid" />
                    </form>
                    <div class="blank10"></div>
                    <div class="btnin">
                        <a class="btn btn-info" id="submits">保存</a>&nbsp;
                        <a class="btn btn-default" id="clear">重置</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- /modals -->
<include file="Public/footer" />
<script>
    $(document).ready(function() {
        //初始化页面
        $('#yhgl1').addClass('on');
        loaddg();
        LoadDDL('role','ROLE');
    });
    //确认密码
    $.extend($.fn.textbox.defaults.rules, {
        eqPassword : { validator : function(value, param) {
                return value == $(param[0]).val();
            },
            message : '密码不一致！'
        }
    });

    //加载数据列表
    function loaddg() {
        $('#dg').datagrid({
            loadMsg: '正在查询，请稍后...',
            title: '点击选中某行数据，再点击编辑可弹出信息维护窗口',
            height: $(window).height() - 300,
            url: '{:U(\'queryuser\')}',
            queryParams: {
                username: $('#q_name').textbox('getValue')
            },
            nowrap: false,
            striped: true,
            collapsible: false,
            loadMsg: '正在加载，请稍后。。。',
            remoteSort: false,
            singleSelect: true,
            pageSize: 100,
            idField: 'id',
            pagination: true,
            rownumbers: false,
            pagination: true,
            pageNumber: 1,
            pageSize: 20,
            pageList: [20, 40, 80, 160],
            fitColumns: true,
            columns: [
                [{
                    field: 'id',
                    title: '序号',
                    width: 50,
                    align: 'center',
                },{
                    field: 'xm',
                    title: '名称',
                    width: 50,
                    align: 'center',
                },{
                    field: 'username',
                    title: '账号',
                    align: 'center',
                    width: 150
                }, {
                    field: 'password',
                    title: '密码',
                    align: 'center',
                    width: 50
                },{
                    field: 'role',
                    title: '角色',
                    align: 'center',
                    width: 50,}
                // }, {field:'cz',title:'操作',align:'center',width:150,
                //     formatter: function(value,row,index) {
                //         var str = '<button class="btn btn-info" id="updatebtn">编辑</button>';
                //         return str;
                //     },}
                ]
            ]
        });
        $("#querybtn").click(function() {
            $('#dg').datagrid('load', {
                "username": $('#q_name').textbox('getValue')
            });
        });
    }
    // 打开弹窗
    $("#addbtn").click(function() {
        $('#ff').form('clear');
        document.getElementById("hidid").value = "I";
        $('#w').window('open');
    })
    //编辑
    $("#updatebtn").click(function() {
        var row = $('#dg').datagrid('getSelected');
        if (row) {
            $('#ff').form('clear');
            document.getElementById("hidid").value = row.id;
            $('#username').textbox('setValue',row.username);
            $('#pwd').textbox('setValue',row.password);
            $('#xm').textbox('setValue',row.xm);
            $('#role').combobox('setValue',row.roleid);
            $('#w').window('open');
        }
        else{
            layer.msg('请选择需要编辑的用户！');
        }
    })

    //重置
    $('#clear').click(function(){
        $('#ff').form('clear');
    })
    //删除
    $('#delbtn').click(function(){
        var row = $('#dg').datagrid('getSelected');
        if(row){
            layer.confirm('您确定要删除选中的数据？', {
                btn: ['是','否'] //按钮
            }, function(){
                var option = {
                    type: "POST",
                    url: "{:U('deluser')}",
                    data: {id:row.id},
                    success: function (data) {
                        layer.closeAll();
                        layer.msg(data);
                        $("#querybtn").click();
                    }
                };
                $.ajax(option);
            }, function(){
                layer.closeAll();
            });
        }
        else{
            layer.msg('请选择需要删除的数据！');
        }
    })

    //提交新增用户
    $('#submits').click(function(){
        var url = "";
        var flg = document.getElementById("hidid").value;
        if (flg == "I") {
            url = "{:U('adduser')}";
        } else {
            url = "{:U('edituser')}";
        }
        $('#ff').form('submit', {
            url: url,
            onSubmit: function (param) {
                var isOk = false;
                isOk = $(this).form('enableValidation').form('validate');
                return isOk;
            },
            success: function (data) {
                layer.msg(JSON.parse(data));
                $("#querybtn").click();
                $('#w').window('close');
                $('#ff').form('clear');
            }
        });
    })
</script>
</body>

</html>